<script setup>
import router from "@/router/index.js";
import {reactive, watch} from "vue";
import { useRoute } from 'vue-router'
import {ElMessage} from "element-plus";
import request from "@/utils/request.js";

const route = useRoute()

const data = reactive({
  port: 'http://localhost:9999',
  selectedDetails: JSON.parse(decodeURIComponent(route.query.selectedDetails)),
  payDrawer: false,
  bttDirection: 'btt',
  amount: 1,
})

// 监听 amount 的变化
watch(() => data.amount,
    (newVal, oldVal) => {
      console.log('amount 发生变化:', newVal)
      // 在这里可以做其他逻辑处理，如计算总价、请求库存等
    }
)

const createOrder = () => {
  request.post('/orders/createOrder',{
    order: {
      name: data.selectedDetails.name,
      price: data.selectedDetails.price,
      userId: JSON.parse(localStorage.getItem('code_user')).id,
      amount: data.amount
    },
    drugDetails: data.selectedDetails,
  }).then(res => {
    if (res.code === '200'){
      ElMessage.success("下单成功")
      data.payDrawer = false
    }else {
      ElMessage.error(res.msg)
    }
  })
}

</script>

<template>
 <div>
<!--   返回-->
   <div style="display: flex;align-items: center;flex-direction: row;margin-top: 10px"
        @click="router.push('/home')">
     <el-icon size="large"><Back /></el-icon>
     <span style="margin-left: 5px">返回</span>
   </div>

<!--   主体-->
   <div style="margin-top: 10px;display: flex;align-items: center;flex-direction: column">
<!--     图片-->
     <el-image
         style="width: 100%;height: 300px"
         :src="data.port+data.selectedDetails.img"
         fit="fill"
     />

<!--     详情-->
     <div class="card" style="margin-top: 15px;width: 100%;height: 50vh;display: flex;flex-direction: column">
      <div style="color: red;font-size: 20px;font-weight:bold">￥{{data.selectedDetails.price}}</div>
       <div style="font-weight:bold">{{data.selectedDetails.name}}</div>
       <div v-html="data.selectedDetails.content.replaceAll('<p', '<p style=\'margin:0\'')" style="color: #a1a1a1"></div>
       <div style="color: #c4c405">剩余数量：{{data.selectedDetails.number}}</div>
       <el-button type="primary" style="margin-top: 30px" @click="data.payDrawer = true">购买</el-button>
     </div>
   </div>

<!--   支付抽屉-->
   <el-drawer v-model="data.payDrawer" :direction="data.bttDirection" size="40%">
     <div>
       <div class="card" style="display: flex;align-items: center;flex-direction: row;height: 120px">
         <el-image
             v-if="data.selectedDetails.img"
             style="flex-shrink: 0;width: 90px; height: 90px; object-fit: cover;margin-left: 5px"
             :src="data.port+data.selectedDetails.img"
             fit="fill"
         />

         <div style="margin-left: 5px;display: flex;flex-direction: column;justify-items: center;height: 100%;width: 100%;">
           <div>{{ data.selectedDetails.name }}</div>
           <div style="margin-top: auto;margin-bottom: 20px;display: flex; align-items: center;">
             <div style="color: red;margin-right: 10px">￥{{data.selectedDetails.price}}</div>

             <!-- 计数器组件 -->
             <div style="display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; padding: 2px 6px;">
               <el-button size="small" @click="data.amount = Math.max(1, data.amount - 1)" style="padding: 2px 8px;">-</el-button>
               <span style="margin: 0 10px; min-width: 20px; text-align: center;">{{ data.amount }}</span>
               <el-button size="small" @click="data.amount++" style="padding: 2px 8px;">+</el-button>
             </div>

           </div>
         </div>

       </div>

       <el-button type="primary" style="margin-top: 30px;width: 100%" @click="createOrder">购买</el-button>
     </div>
   </el-drawer>

 </div>
</template>

<style scoped>

</style>